<template>
    <div class="task-index">
        任务展示管理
        <div class="task-for-box">
            <div class="task-items">
                <!-- 签到 -->
                <div class="sign-card">
                    <div class="sign-title">
                        <div class="title-left">连续60天签到领好礼</div>
                        <div class="title-right">详情</div>
                    </div>
                    <div class="sign-award">
                        <div v-for="(item, index) in 7" :key="index" class="award-items">
                            <div class="award-card" v-if="index === 2">
                                <div class="gift-card" ></div>
                                <div class="award-num">惊喜</div>
                            </div>
                            <div class="award-card" v-else-if="index === 3">
                                <div class="red-card"></div>
                                <div class="award-num">?元</div>
                            </div>
                            <div class="award-card" v-else>
                                <div class="gold-card"></div>
                                <div class="award-num">+120</div>
                            </div>
                            <div class="award-days">{{index + 1}} 天</div>
                        </div>
                    </div>
                </div>

                <!-- 悬赏 -->
                <div class="xuanshang-box">
                </div>

                <!-- 新手金币福利 -->
                <div class="new-user-gold-box">
                    <div class="new-user-gold-title">新手金币福利</div>
                    <div class="new-user-gold-card">
                        <div class="gold-items" v-for="(item, index) in 7" :key="index">
                            <div class="red-card-items"></div>
                            <div class="red-card-days">第{{index + 1}}天</div>
                        </div>
                    </div>
                </div>

                <!-- 召集令 -->
                <div class="zhaoji-card"></div>

                <!-- 新手任务 -->
                <div class="task-items-box">
                    <div class="first-task">
                        <percent first="100" second="100" three="100"/>
                    </div>
                    <div class="children-task"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import percent from './taskPercent'
export default {
    components: {
        percent
    }
}
</script>

<style lang="scss" scoped>
    .task-index {
        width: 360px;
        padding: 8px;
        margin: 0 auto;
        background-color: rgb(247, 244, 248);
        .task-for-box {
            .task-items {
                > div {
                    margin-top: 8px;
                    background:rgba(255,255,255,1);
                    border-radius:8px;
                }

                // 签到
                .sign-card {
                    padding: 14px;
                    .sign-title {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .title-left {
                            font-size:14px;
                            font-family:SourceHanSansCN-Medium,SourceHanSansCN;
                            font-weight:500;
                            color:rgba(28,32,44,1);
                            line-height:21px;
                        }
                        .title-right {
                            position: relative;
                            top: 0;
                            right: 9px;
                            z-index: 1;
                            font-size:12px;
                            font-family:SourceHanSansCN-Regular,SourceHanSansCN;
                            font-weight:400;
                            color:rgba(28,32,44,1);
                            opacity: .4;
                            &::before {
                                content: '';
                                height: 8px;
                                width: 8px;
                                position: absolute;
                                top: 50%;
                                right: 0;
                                z-index: 1;
                                transform: translate(100%, -50%) rotate(-45deg);
                                opacity: .5;
                                border-right: 2px solid #242B45;
                                border-bottom: 2px solid #242B45;
                            }
                        }
                    }
                    .sign-award {
                        margin-top: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .award-items {
                            width: 40px;
                            .award-card {
                                position: relative;
                                top: 0;
                                left: 0;
                                z-index: 1;
                                height:56px;
                                border-radius:4px;
                                background-color: rgb(238, 237, 240);
                                .gift-card {
                                    width: 16px;
                                    height: 16px;
                                    position: absolute;
                                    top: 11px;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    background-image: url('./img/gift.png');
                                    background-size: 100% 100%;
                                }
                                .red-card {
                                    width: 16px;
                                    height: 19px;
                                    position: absolute;
                                    top: 9px;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    background-image: url('./img/red-card.png');
                                    background-size: 100% 100%;
                                }
                                .gold-card {
                                    width: 16px;
                                    height: 16px;
                                    position: absolute;
                                    top: 12px;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    background-image: url('./img/gold.png');
                                    background-size: 100% 100%;
                                }
                                .award-num {
                                    position: absolute;
                                    bottom: 8px;
                                    z-index: 1;
                                    width: 100%;
                                    text-align: center;
                                    color: #1C202C;
                                    opacity: .4;
                                    font-size:12px;
                                    font-family:Roboto-Medium,Roboto;
                                    font-weight:500;
                                }
                            }
                            .award-days {
                                text-align: center;
                                margin-top: 3px;
                                font-size:11px;
                                font-family:SourceHanSansCN-Regular,SourceHanSansCN;
                                font-weight:400;
                                color: #1C202C;
                                opacity: .6;
                            }
                        }
                    }
                }

                // 悬赏
                .xuanshang-box {
                    height: 98px;
                    background-image: url('./img/xuanshang.png');
                    background-size: 100% 100%;
                }

                // 新手金币福利
                .new-user-gold-box {
                    padding: 14px;
                    background:rgba(255,255,255,1);
                    border-radius:8px;
                    .new-user-gold-title {
                        font-size:14px;
                        font-family:SourceHanSansCN-Medium,SourceHanSansCN;
                        font-weight:500;
                        color:rgba(28,32,44,1);
                    }

                    .new-user-gold-card {
                        margin-top: 14px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .gold-items {
                            width: 40px;
                            .red-card-items {
                                height: 48px;
                                background-color: pink;
                            }
                            .red-card-days {
                                margin-top: 5px;
                                text-align: center;
                                font-size:11px;
                                font-family:SourceHanSansCN-Regular,SourceHanSansCN;
                                font-weight:400;
                                color:rgba(28,32,44,1);
                                opacity: .6;
                            }
                        }
                    }
                }

                // 召集令
                .zhaoji-card {
                    background-color: inherit;
                    height: 64px;
                    background-image: url('./img/banner.png');
                    background-size: 100% 100%;
                }

                // 任务盒子
                .task-items-box {
                    .first-task {

                    }
                }
            }

        }
    }
</style>
